<template>
  <div class="flex right justify-end top previewSaveBtn">
    <vxe-button
      type="text"
      class="button-blue button-right"
      content="预览"
      @click="ReportPpreview"
    ></vxe-button>

    <vxe-button
      type="text"
      class="button-blue button-right"
      content="保存"
      @click="attributeSave"
    ></vxe-button>
  </div>
  <div id="reportRules">
    <!-- 修改表单 -->
    <el-form
      ref="reportForm"
      :model="attributeform"
      label-width="100px"
      class="form-input-m"
      :inline-message="true"
    >
      <el-divider content-position="left" class="divide"
        ><span class="spanline">页边距</span>
      </el-divider>
      <el-form-item prop="code" label="模版名称">
        <div class="disabled-input-wrapper">
          <el-input type="text" v-model="attributeform.reportName" :readonly="true"></el-input>
        </div>
      </el-form-item>

      <el-form-item prop="name" label="页边距样式">
        <!-- <el-input type="text" v-model="form.saveAsName" placeholder="请输入报表名称" clearable></el-input> -->
        <el-select
          v-model="attributeform.marginStyle"
          placeholder="页边距样式"
          clearable
          filterable
          allow-create
          @change="marginStyleChange"
        >
          <el-option label="无边距(0cm*0cm)" value="0cm"></el-option>
          <el-option label="很窄(0.25cm * 0.25cm)" value="0.25cm"></el-option>
          <el-option label="较窄(0.5cm * 0.5cm)" value="0.5cm"></el-option>
          <el-option label="正常(1cm * 1cm)" value="1cm"></el-option>
          <el-option label="较宽(2.5cm * 2.5cm)" value="2.5cm"></el-option>
          <el-option label="很宽(5cm * 2.5cm)" value="5cm"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="paperMarginSize" label="页边距大小">
        <el-input
          type="text"
          v-model="attributeform.paperMarginSize"
          @blur="paperMarginSizeBlur"
        ></el-input>
        <el-button
          class="paperMarginSizeBtn"
          type="primary"
          :icon="Edit"
          circle
          @click="clickShow"
        />
      </el-form-item>

      <div class="input-container" v-show="isShowBj">
        <el-form-item prop="topMargin" label="">
          <el-icon>
            <Top />
          </el-icon>
          <el-input type="text" v-model="attributeform.topMargin" @blur="topMarginBlur"></el-input>
        </el-form-item>
        <el-form-item prop="bottomMargin" label="">
          <el-icon>
            <Bottom />
          </el-icon>
          <el-input
            type="text"
            v-model="attributeform.bottomMargin"
            @blur="bottomMarginBlur"
          ></el-input>
        </el-form-item>
        <el-form-item prop="bottomMargin" label="">
          <el-icon>
            <Back />
          </el-icon>
          <el-input
            type="text"
            v-model="attributeform.leftMargin"
            @blur="leftMarginBlur"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-icon>
            <Right />
          </el-icon>
          <el-input
            type="text"
            v-model="attributeform.rightMargin"
            @blur="rightMarginBlur"
          ></el-input>
        </el-form-item>
      </div>

      <el-divider content-position="left" class="divide"
        ><span class="spanline">纸张选项</span></el-divider
      >

      <el-form-item prop="paperSize" label="纸张大小">
        <el-select
          v-model="attributeform.paperSize"
          placeholder="选择或自定义纸张大小"
          clearable
          filterable
          allow-create
          @change="paperSizeChange"
        >
          <el-option label="A3" value="29.7cm,42cm"></el-option>
          <el-option label="A4" value="21cm,29.7cm"></el-option>
          <el-option label="A5" value="14.8cm,21cm"></el-option>
          <el-option label="A6" value="10.5cm,14.8cm"></el-option>
          <el-option label="B4(JIS)" value="25.7cm,36.4cm"></el-option>
          <el-option label="B5(JIS)" value="18.2cm,25.7cm"></el-option>
          <el-option label="B6(JIS)" value="12.8cm,18.2cm"></el-option>
          <el-option label="B5(ISO)" value="17.6cm,25cm"></el-option>
          <el-option label="Tabloid" value="29.7cm,43.2cm"></el-option>
          <el-option label="移动页面" value="10cm,18cm"></el-option>
          <el-option label="信纸" value="21.6cm,27.9cm"></el-option>
          <el-option label="法律信纸" value="21.6cm,35.6cm"></el-option>
          <el-option label="Executive" value="18.4cm,26.7cm"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="paperPotation" label="纸张方向">
        <el-select
          v-model="attributeform.paperPotation"
          placeholder="选择纸张方向"
          clearable
          filterable
          allow-create
          @change="paperPotationChange"
        >
          <el-option label="纵向" value="0"></el-option>
          <el-option label="横向" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="paperWide" label="纸张宽度">
        <el-input v-model="attributeform.paperWide" type="text" @blur="paperWideBlur" />
      </el-form-item>
      <el-form-item prop="paperHigh" label="纸张高度">
        <el-input v-model="attributeform.paperHigh" type="text" @blur="paperHighBlur" />
      </el-form-item>

      <!-- <el-divider content-position="left" class="divide"><span class="spanline">预览报表</span></el-divider>
        <el-form-item prop="displayMethod" label="显示方式">
          <el-select v-model="attributeform.displayMethod" placeholder="选择显示方式" clearable filterable allow-create>
            <el-option label="不分页" value="不分页"></el-option>
            <el-option label="单页视图" value="单页视图"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item prop="selfAdaption" label="大小自适应">
          <el-select v-model="attributeform.selfAdaption" placeholder="选择自适应类别" clearable filterable allow-create>
            <el-option label="原始大小" value="原始大小"></el-option>
            <el-option label="符合页面" value="符合页面"></el-option>
            <el-option label="符合宽度" value="符合宽度"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="changePage" label="距表换页方式">
          <el-select v-model="attributeform.changePage" placeholder="选择换页方式" clearable filterable allow-create>
            <el-option label="Z-先列后行" value="Z-先列后行"></el-option>
            <el-option label="N-先行后列" value="N-先行后列"></el-option>
          </el-select>
        </el-form-item>

        <el-divider content-position="left" class="divide"><span class="spanline">其他选项</span></el-divider> -->

      <!-- <el-form-item prop="reportAuthor" label="报表作者">
                            <el-input v-model="attributeform.reportAuthor" type="text" />
                          </el-form-item>
                          <el-form-item prop="reportDescribe" label="报表描述">
                            <el-input v-model="attributeform.reportDescribe" type="text" />
                          </el-form-item>
                          <el-form-item prop="reportLanguage" label="语言">
                            <el-select v-model="attributeform.reportLanguage" placeholder="选择相应的语言" clearable filterable
                              allow-create>
                              <el-option label="默认" value="默认"></el-option>
                            </el-select> 

                          </el-form-item>-->
      <!-- <el-form-item prop="startPage" label="开始页号">
          <el-input-number v-model="attributeform.startPage" :min="1" :max="1000" />
        </el-form-item> -->
    </el-form>
  </div>
</template>
<script setup lang="ts">
// 公共组件标题
const content = ref('报告规则设置');
import { ref, reactive, getCurrentInstance, watch, onMounted } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import { pageSizes, notifyType, notifyMessage } from '../../utils/common';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { VxeTablePropTypes } from 'vxe-table';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Check, Delete, Edit, Message, Search, Star } from '@element-plus/icons-vue';
import 'splitpanes/dist/splitpanes.css';
import { VXETable } from 'vxe-table';
import XEUtils from 'xe-utils';
import { VxeMessage } from '../../utils/CommonMessage';
import { AppStore } from '../../stores/store';
import axios from 'axios';
import ReportRulesSpecial from './ReportRulesSpecial.vue'; //仪器报表

import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue';
import { compose } from 'element-plus/es/components/table/src/util';

let store = AppStore();
let conHeight = ref(document.documentElement.clientHeight || document.body.clientHeight);
let defaultProps = {
  children: 'children',
  label: 'title'
};
let treeloading = ref(false);
let isShowParentName = ref(false);
//暴露属性和方法
defineExpose({ initPage });

// 页面加载时更新用户列表
let loading = ref(false);
// 弹框表单状态
let showDialog = ref(false);
let isShowCode = ref(false);

let drawer = ref(false);
let spanText = ref('');
let isShowBj = ref(false);
let { proxy }: any = getCurrentInstance();

//报表属性提交表单
let attributeform = reactive({
  id: null,
  reportName: '',
  reportId: '',
  reportCode: '',
  paperSize: 'A4',
  marginStyle: '无边距(0cm * 0cm)',
  paperMarginSize: '0cm',
  topMargin: '0cm',
  bottomMargin: '0cm',
  leftMargin: '0cm',
  rightMargin: '0cm',
  paperPotation: '0',
  columnNumber: '1',
  columnSpacing: '0.5in',
  displayBlank: '0',
  paperWide: '21cm',
  paperHigh: '29.7cm',
  displayMethod: '单页视图',
  selfAdaption: '原始大小',
  reportAuthor: '',
  reportDescribe: '',
  reportLanguage: '默认',
  startPage: '1',
  changePage: 'Z-先列后行'
});

let width = '21cm';
let height = '29.7cm';
let paperPotation = '0';

//根据不同纸张获取纸张宽高
function paperSizeChange(changeObj: any) {
  const parts = changeObj.split(',');
  if (parts.length === 2) {
    width = parts[0];
    height = parts[1];
    if (paperPotation === '0') {
      attributeform.paperWide = width;
      attributeform.paperHigh = height;
    } else {
      attributeform.paperWide = height;
      attributeform.paperHigh = width;
    }
  }
}

//改变横向纵向方法
function paperPotationChange(changepaper: any) {
  paperPotation === changepaper;
  if (changepaper === '0') {
    attributeform.paperWide = width;
    attributeform.paperHigh = height;
  } else {
    attributeform.paperWide = height;
    attributeform.paperHigh = width;
  }
}
//let refReport = reactive([]);//父传来的点击当前行的值
function marginStyleChange(value: string) {
  attributeform.paperMarginSize = value;
  attributeform.topMargin = value;
  attributeform.bottomMargin = value;
  attributeform.leftMargin = value;
  attributeform.rightMargin = value;
}

//父传子值接收
function initPage(row: any) {
  attributeform.reportName = row.name;
  attributeform.reportId = row.id;
  attributeform.reportCode = row.reportCode;
}

//预览
function ReportPpreview() {
  // if (!this.patrolForm || IsEmpty(this.patrolForm.id)) {
  //     (this as any).$XModal.message({ content: '请先选中要预览的项', status: 'warning' });
  //     return;
  //   }
  //const patrolForm = ref({ id: 1 }); // 假设你的 patrolForm 是这样的

  const id = attributeform.reportId;
  // store.commit('setSinglePreview', {
  //     RptId: id,
  //     RptParameters: [{ Name: 'Id', Values: [patrolForm.value.id.toString()] }],
  //     IsShowPrintDialog: true
  //   });
  if (id) {
    window.open((window as any).apiUrl.VUE_APP_PRINT_URL + '/designer/edit/' + id, 'top');
    return;
  }
  window.open((window as any).apiUrl.VUE_APP_PRINT_URL + '/designer', '_blank');
}

function attributeSave() {
  const url = '/api/pubReport/attributeSave';
  let reqForm = attributeform;
  proxy.$http
    .post(url, reqForm)
    .then((res) => {
      ElMessage({
        message: '设置成功',
        type: 'success'
      });
      drawer.value = false;
    })
    .catch((err) => {
      console.log(err);
      ElMessage({
        message: '设置异常',
        type: 'error'
      });
    });
}

function paperMarginSizeBlur() {
  let paperMarginSize = attributeform.paperMarginSize;

  const regex = /(\d+cm)/g; // 匹配带有数字的"cm"的正则表达式，使用"g"修饰符进行全局匹配
  let match;
  const matches = [];

  while ((match = regex.exec(paperMarginSize)) !== null) {
    matches.push(match[0]);
  }
  const count = matches.length; // 匹配到的次数
  if (count > 1) {
    return;
  }

  const valueWithoutUnit = paperMarginSize.replace('cm', '');
  const numericValue = Number(valueWithoutUnit);
  if (!isNaN(numericValue) && numericValue >= 0) {
    attributeform.paperMarginSize = `${Number(numericValue)}cm`;
    paperMarginSize = `${Number(numericValue)}cm`;
  } else {
    attributeform.paperMarginSize = '';
    paperMarginSize = '';
  }
  attributeform.topMargin = paperMarginSize;
  attributeform.leftMargin = paperMarginSize;
  attributeform.bottomMargin = paperMarginSize;
  attributeform.rightMargin = paperMarginSize;
}
let paperWideArray = [
  '21cm',
  '14.8cm',
  '10.5cm',
  '25.7cm',
  '18.2cm',
  '12.8cm',
  '17.6cm',
  '29.7cm',
  '10cm',
  '21.6cm',
  '18.4cm'
];
let paperHideArray = [
  '42cm',
  '29.7cm',
  '21cm',
  '14.8cm',
  '36.4cm',
  '25.7cm',
  '18.2cm',
  '25cm',
  '43.2cm',
  '18cm',
  '27.9cm',
  '35.6cm',
  '26.7cm'
];
// attributeform.paperSize='自定义'
//输入宽
function paperWideBlur() {
  let paperWide = attributeform.paperWide;
  const valueWithoutUnit = paperWide.replace('cm', '');
  const numericValue = Number(valueWithoutUnit);
  if (!isNaN(numericValue) && numericValue >= 0) {
    attributeform.paperWide = `${Number(numericValue)}cm`;
    paperWide = `${Number(numericValue)}cm`;
  } else {
    attributeform.paperWide = '0cm';
    paperWide = '';
  }

  const containsPaperWide = paperWideArray.includes(paperWide);
  if (attributeform.paperWide !== '' && attributeform.paperWide !== null) {
    if (attributeform.paperPotation === '0') {
      if (!containsPaperWide) {
        attributeform.paperSize = '自定义';
      }
    } else {
      const containsPaperWide = paperHideArray.includes(paperWide);
      if (!containsPaperWide) {
        attributeform.paperSize = '自定义';
      }
    }
  }
}
//输入高
function paperHighBlur() {
  let paperHigh = attributeform.paperHigh;
  const valueWithoutUnit = paperHigh.replace('cm', '');
  const numericValue = Number(valueWithoutUnit);
  if (!isNaN(numericValue) && numericValue >= 0) {
    attributeform.paperHigh = `${Number(numericValue)}cm`;
    paperHigh = `${Number(numericValue)}cm`;
  } else {
    attributeform.paperHigh = '0cm';
    paperHigh = '';
  }
  const containsPaperWide = paperHideArray.includes(paperHigh);
  if (attributeform.paperHigh !== '' && attributeform.paperHigh !== null) {
    if (attributeform.paperPotation === '0') {
      if (!containsPaperWide) {
        attributeform.paperSize = '自定义';
      }
    } else {
      const containsPaperWide = paperWideArray.includes(paperHigh);
      if (!containsPaperWide) {
        attributeform.paperSize = '自定义';
      }
    }
  }
}
function topMarginBlur() {
  let topMargin = attributeform.topMargin;
  const valueWithoutUnit = topMargin.replace('cm', '');
  const numericValue = Number(valueWithoutUnit);

  if (!isNaN(numericValue) && numericValue >= 0) {
    attributeform.topMargin = `${Number(numericValue)}cm`;
    topMargin = `${Number(numericValue)}cm`;
  } else {
    attributeform.topMargin = '';
    topMargin = '';
  }
  attributeform.topMargin = topMargin;
  if (
    topMargin !== attributeform.bottomMargin &&
    topMargin !== attributeform.leftMargin &&
    topMargin !== attributeform.rightMargin
  ) {
    attributeform.paperMarginSize =
      topMargin +
      ' ' +
      attributeform.bottomMargin +
      ' ' +
      attributeform.leftMargin +
      ' ' +
      attributeform.rightMargin;
  }
}
function bottomMarginBlur() {
  let bottomMargin = attributeform.bottomMargin;
  const valueWithoutUnit = bottomMargin.replace('cm', '');
  const numericValue = Number(valueWithoutUnit);
  if (!isNaN(numericValue) && numericValue >= 0) {
    attributeform.bottomMargin = `${Number(numericValue)}cm`;
    bottomMargin = `${Number(numericValue)}cm`;
  } else {
    attributeform.bottomMargin = '';
    bottomMargin = '';
  }
  attributeform.bottomMargin = bottomMargin;
  if (
    bottomMargin !== attributeform.topMargin &&
    bottomMargin !== attributeform.leftMargin &&
    bottomMargin !== attributeform.rightMargin
  ) {
    attributeform.paperMarginSize =
      attributeform.topMargin +
      ' ' +
      bottomMargin +
      ' ' +
      attributeform.leftMargin +
      ' ' +
      attributeform.rightMargin;
  }
}
function leftMarginBlur() {
  let leftMargin = attributeform.leftMargin;
  const valueWithoutUnit = leftMargin.replace('cm', '');
  const numericValue = Number(valueWithoutUnit);
  if (!isNaN(numericValue) && numericValue >= 0) {
    attributeform.leftMargin = `${Number(numericValue)}cm`;
    leftMargin = `${Number(numericValue)}cm`;
  } else {
    attributeform.leftMargin = '';
    leftMargin = '';
  }
  attributeform.leftMargin = leftMargin;
  if (
    leftMargin !== attributeform.topMargin &&
    leftMargin !== attributeform.bottomMargin &&
    leftMargin !== attributeform.rightMargin
  ) {
    attributeform.paperMarginSize =
      attributeform.topMargin +
      ' ' +
      attributeform.bottomMargin +
      ' ' +
      leftMargin +
      ' ' +
      attributeform.rightMargin;
  }
}
function rightMarginBlur() {
  let rightMargin = attributeform.rightMargin;
  const valueWithoutUnit = rightMargin.replace('cm', '');
  const numericValue = Number(valueWithoutUnit);
  if (!isNaN(numericValue) && numericValue >= 0) {
    attributeform.rightMargin = `${Number(numericValue)}cm`;
    rightMargin = `${Number(numericValue)}cm`;
  } else {
    attributeform.rightMargin = '';
    rightMargin = '';
  }
  attributeform.rightMargin = rightMargin;
  if (
    rightMargin !== attributeform.topMargin &&
    rightMargin !== attributeform.bottomMargin &&
    rightMargin !== attributeform.leftMargin
  ) {
    attributeform.paperMarginSize =
      attributeform.topMargin +
      ' ' +
      attributeform.bottomMargin +
      ' ' +
      attributeform.leftMargin +
      ' ' +
      rightMargin;
  }
}

function clickShow() {
  isShowBj.value = !isShowBj.value;
}
</script>

<style lang="scss" scoped>
.previewSaveBtn {
  margin-right: 10px;
}
#reportRules {
  width: 100%;
  .paperMarginSizeBtn {
    margin-left: 5px;
  }
  .button-right {
    margin-right: 5px;
  }
}
</style>
